<template>
  <div>
    <div class="top" style="line-height: 3px">
      <el-input
        size="small"
        class="inputF"
        v-model="searchInput"
        placeholder="输入搜索内容"
      ></el-input>

      <el-select
        size="small"
        class="selectF"
        v-model="value"
        clearable
        placeholder="类型"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>

      <el-button
        @click="searchgoods"
        size="mini"
        icon="el-icon-search"
        type="success"
        >搜索</el-button
      >
      <el-button
        size="mini"
        icon="el-icon-refresh"
        type="danger"
        @click="refresh"
      >
        刷新</el-button
      >
      </div>

      <!-- 表格 -->
      <killtable
      :border="false"
      :tableData="tableData"
      :headData="headData"
      @SizeChange="SizeChange"
      @CurrentChange="CurrentChange"
      :total="total"
      :pagesize="pagesize"
      :currentpage="currentpage"
    >
      <template v-slot:image="{row}">
          <div>
            <el-image
            class="BargainingPicture"
              :preview-src-list="[row.image]"
              :src="row.image">
            </el-image>
          </div>
      </template>
      <template v-slot:operation="{row}">
          <el-button type="primary" size="mini" @click="edit(row)" icon="el-icon-edit"></el-button>
          <el-popconfirm
          @confirm="handleConfirm(row)"
            title="确定删除本条数据吗？"
          >
            <el-button slot="reference" type="danger" size="mini" icon="el-icon-delete"></el-button>
          </el-popconfirm>
      </template>
    </killtable>
    <killedit
    @closePopup="closePopup"
    @editingCompleted="editingCompleted"
    :dialogFormVisible="dialogVisible"
    :thistitle="dialogtitle"
    :sendtoPopup="sendtoPopup"
    ></killedit>   
  </div>
</template>

<script>
import killtable from "@/components/znuse/killtable.vue"
import { SeckillProducts,SeckillSearchProducts } from "@/api/FlashKillingProducts";
import moment from "moment";
import killedit from "../../components/znuse/killedit.vue";

export default {
  components: { killedit , killtable },
  name: "FlashKillingProducts",
  // inject: ['reload'],
  data() {
    return {
      dialogVisible: false,
      searchInput: "",
      list: [],
      total:0,
      pagesize:10,
      currentpage:0,
      sendtoPopup:{},
      value: "",
      options:[
        {
          value:"选项1",
          label:"产品标题"
        }
      ],
       tableData: [],
        headData:[
            {
                prop:"id",
                label:"id",
              
            },{
                prop:"image",
                label:"产品主图",
              
                slot:true
            },
            {
                prop:"title",
                label:"产品标题",
              
            },{
                prop:"price",
                label:"秒杀价",
            
            },{
                prop:"otPrice",
                label:"原价",
             
            },{
                prop:"stock",
                label:"库存",
           
            },{
                prop:"sales",
                label:"销量",
             
            },{
                prop:"num",
                label:"限购",
             
            },{
                prop:"statusStr",
                label:"秒杀状态",
             
            },{
                prop:"startTime",
                label:"开始时间",
               
            },{
                prop:"stopTime",
                label:"结束时间",
                
            },
        ]
    };
  },

  mounted() {
//页面加载完成时调用商品接口
    this.initialization()
  },


  methods: {
    //刷新按钮
    refresh() {
      this.initialization();
    },

    CurrentChange(pagenum){
      this.currentpage = pagenum-1
      this.yxStoreBargainFn()
    },
    // 初始化调取接口
    initialization() {
      SeckillProducts().then((res) => {
        console.log(res);
        let _self = this;
        _self.list = res.content;
        _self.tableData = [];
        _self.total = res.totalElement
       for(let item of res.content){
            this.tableData.push({
               
                cost :item.cost,
                createTime :item.createTime,
                description :item.description,
                giveIntegral :item.giveIntegral,
                id :item.id,
                image :item.image,
                images :item.images,
                info:item.info,
                num:item.num,
                otPrice:item.otPrice, 
                price:item.price,
                productId:item.productId,
                sales:item.sales,
                sort:item.sort,
                startTime:moment(item.startTime).format("yyyy-MM-DD HH:mm:ss"),
                status:item.status,
                statusStr:item.statusStr,
                stock:item.stock,
                stopTime:moment(item.stopTime).format("yyyy-MM-DD HH:mm:ss"),
                timeId:item.timeId,
                title:item.title,
                unitName:item.unitName,
            })
        }
      });
    },

    // 控制弹窗
    closePopup() {
      this.dialogVisible = false;
      this.$confirm('信息未保存，确定关闭弹窗吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
      }).catch(() => {});
    },

    // 搜索商品
    searchgoods(){
      let _self =this
      let data = {}
      if(self.searchInput == ""&&self.value == ""){
        _self.data=""
      }else if(self.searchInput == ""&&self.value){
        _self.data="&type=title"
      }else if(self.searchInput&&self.value== ""){
        _self.data=`&type=&value=${encodeURIComponent(_self.searchInput)}`
      }else if(self.searchInput&&self.value){
        _self.data=`&type=title&value=${encodeURIComponent(_self.searchInput)}&type=${encodeURIComponent(_self.value)}`
    }
    SeckillSearchProducts(_self.data).then(res=> {
      let _self = this;
      console.log(res);
      for(let i = 0;i < res.content.length; i++){
        var sname = _self.searchInput.trim().toLowerCase();
        var Name = res.content[i].title.trim().toLowerCase();
        var arr = sname.aplit("")
        for(var j = 0;j < arr.length; j++){
          if (Name.search(arr[j])!= -1){
            _self.tableData =[];
            _self.tableData.push(res.content[i]);
            
          }else{
            _self.tableData = []
          }
        }
      }
      _self.input = "";
      _self.value = "";
    })

    
    },


    

    //编辑按钮
     edit(item){
        console.log('发给弹窗组件这个',this.tableData[item.index]);
        this.sendtoPopup = this.tableData[item.index];
        this.dialogVisible = true
    },
  },
};
</script>

<style>
.inputF {
  width: 200px;
}
.selectF {
  width: 130px;
}
.top {
  float: left;
}
.clear {
  clear: both;
}
.mainTable {
  font-size: 13px;
}
.tableImage {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}
.nonebt {
  display: none;
}
</style>